<template>
  <div>
    <!-- 搜索 -->
    <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      disbled
      @click="$router.push('/home/searchPopup')"
    />

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" width="100%" alt="" />
      </van-swipe-item>
    </van-swipe>
    <transition name="slide">
       <router-view></router-view>
    </transition>
   
  </div>
</template>

<script>
import { GetHomeList } from "@/request/api";

// import request from '@/request/request'
// import {GetHomeData} from "@/request/api"
// import axios from 'axios'
export default {
  name: "homeIndex",

  components: {},

  directives: {},

  data() {
    return {
      value: "",
      banner: [],
    };
  },
  created() {
    GetHomeList()
      // axios.get('http://kumanxuan1.f3322.net:8001/index/index')
      //  request.get('/index/index')
      .then((res) => {
        // console.log(res);
        // console.log(1);
        // console.log(res.data.banner);
        // console.log(res.data.data.banner);
        this.banner = res.data.banner;
      });
  },
  mounted() {},

  methods: {},
};
</script>

<style lang="stylus" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  height: 200px;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.slide-enter,.slide-leave-to{
    //过度开始之前
right: -100%;

}
.slide-enter-active,.slide-leave-active{
    
transition: right .3s;

}
.slide-enter-to,.slide-leave{
    //过度开始之后
right:0;

}
</style>